// import React from 'react'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import '../assets/css/login.css'
import { Link } from 'react-router-dom'
import { Toast } from 'antd-mobile'
import { Login } from "../request/api"

export default function Login11() {
    const navigate = useNavigate()
    const [user, setuser] = useState({
        phone: '',
        password: ''
    })
    //封装一个change事件
    // changeInfo(type, e) {
    //     this.setState({
    //         user: {
    //             ...this.state.user,
    //             [type]: e.target.value
    //         }
    //     })
    // },
    function login() {
        if (user.password === "" || user.phone === "") {
            Toast.show({
                content: '不能为空',
            })
            return;
        }
        let str = /^1[3-9]\d{9}$/;
        if (!str.test(user.phone)) {
            Toast.show({
                content: "手机号格式不对",
            });
            return;
        }
        // 会话存储到数据库
        Login(user).then(res => {
            Toast.show({
                content: res.msg,
            })
            console.log(res);
            if (res.code == 200) {
                sessionStorage.setItem('isLogin', JSON.stringify(res.list))
                navigate("/index/home")
            }
        })
    }
    function Logina(type, e) {
        setuser({
            ...user,
            [type]: e.target.value,
        })
    }
    return (<div>
        <div id="login">
            <header>

                <div className="top_box">

                    <a href="#">
                        <span className="iconfont icon-zuojiantou"></span>
                    </a>
                    <h2>手机登录</h2>

                    <div className="more">

                        <a href="#">
                            <span className="iconfont icon-gengduo"></span>
                        </a>

                        <div className="line"></div>

                        <a href="#">
                            <span className="iconfont icon-xiaoyuandian"></span>
                        </a>
                    </div>
                </div>
            </header>
            <div className="body">
                <p>
                    <img src={require('../assets/images/小u优选.png')} alt="" />
                </p>
                <p>
                    <input type="text" placeholder="手机号" value={user.phone} onChange={Logina.bind(this, 'phone')} />
                </p>
                <p>
                    <input type="text" placeholder="密码" value={user.password} onChange={Logina.bind(this, 'password')} />
                </p>
                <a href="#/register" className='toReg'>没有账号，去注册</a>
                <p>
                    <input type="submit" value="登           录" onClick={(e) => login(e)} />
                </p>
            </div>
        </div>
    </div>)

}